<!-- 项目分佣管理 -->
<template>
	<div>
	    <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
	    	<el-form-item label="楼盘名称：">
				<el-input placeholder="请输入楼盘名称" v-model.trim="ruleForm.devName" size="small"></el-input>
	    	</el-form-item>
			<el-form-item label="项目等级：" prop="projectLevelId">
				<el-select v-model="ruleForm.projectLevelId" filterable style="width: 200px;" size="small">
					<el-option v-for="item in levellist"
						:key="item.id"
						:label="item.name"
						:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="开发商：" prop="developerId">
				<el-select v-model="ruleForm.developerId" filterable style="width: 200px;" size="small">
					<el-option v-for="item in devlist"
						:key="item.id"
						:label="item.developerName"
						:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
	    	<el-form-item>
	    		<el-button type="success"  @click="searchList" id="monitorEnter"  size="small">查询</el-button>
	    		<el-button size="small" type="primary" @click="upLoadHandle">导入项目等级</el-button>
	    		<el-button size="small" type="primary" @click="downExcelHandle">下载导入模版</el-button>
	    		<a :href="downUrl" ref="downNode" target="_blank"></a>
	    		<input type="file" ref="upLoad" style="display: none;" @change="fileChangeHandle">
	    	</el-form-item>
	    </el-form>

		<el-table :data="tableData" border style="width: 90%">
			<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
			<el-table-column label="楼盘名称" prop="devName" align="center"></el-table-column>
			<el-table-column label="楼盘ID" prop='devId' align="center"></el-table-column>
			<el-table-column label="开发商" prop="developerName" align="center"></el-table-column>
			<el-table-column label="合作标签" prop="labelName" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.labelName !== null?scope.row.labelName:'——'}}</span>
				</template>
			</el-table-column>
			<el-table-column label="项目等级" prop="projectLevelName" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.projectLevelName !== null?scope.row.projectLevelName:'——'}}</span>
				</template>
			</el-table-column>
			<el-table-column label="项目类别" prop="category"  align="center">
				<template slot-scope="scope">
					<span>{{scope.row.category==0?'外部':'内部'}}</span>
				</template>
			</el-table-column>
			<el-table-column label="分佣设置" align="center">
				<template  slot-scope="scope">
					<el-button type="text" @click="sethander(scope.row)">点击设置</el-button>
				</template>
			</el-table-column>
			<el-table-column label="项目关键人设置" align="center" >
				<template  slot-scope="scope">
					<div v-if="scope.row.keyperson" style="display: flex;">
						<div @click="operatekeymanhander(scope.row,'edit')">
							<p style="color:#409EFF;margin: 0">{{scope.row.keyperson}}</p>
							<p style="color:#409EFF;margin: 0">{{scope.row.keypersonPhone}}</p>
						</div>
						<el-button style="margin-left: 8px" type="text" @click="operatekeymanhander(scope.row,'cancel')">取消设置</el-button>
					</div>
					<el-button v-else type="text" @click="operatekeymanhander(scope.row,'set')">点击设置</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="pagebar">
		  <el-pagination
		    background
		    layout="total, sizes, prev, pager, next"
		    :current-page.sync="ruleForm.pageNum"
		    :page-sizes="[10, 20, 30, 40]"
		    :page-size="ruleForm.pageSize"
		    @size-change="handleSizeChange"
		    @current-change="handleCurrentChange"
		    :total="totalSize">
		  </el-pagination>
		</div>
	</div>
</template>

<script>
    import api from '@/api/apiPath'
	export default {
		name:'subcommission',
		title:'项目分佣管理',
		data () {
			return {
				ruleForm:{
					projectLevelId:'',
					developerId:'',
					devName:undefined,
					pageNum: 0,
					pageSize: 10,
				},
				totalSize:0,
				tableData:[],
				levellist:[],
				devlist:[],
				downUrl: `${api.domain}/commallocation/staff/downloadTemplateExcel?templateType=楼盘项目等级模板`
			}
		},
		methods:{
			fileChangeHandle() {
			    const file = this.$refs.upLoad.files[0]
			    if (file) {
			        let param = new FormData()
			        param.append('excelFile', file)
			        this.$axios.post('/commallocation/projectSetting/uploadExcel',param).then(res=>{
	        	         this.$message({
	        	              message: '导入成功',
	        	              type: 'success'
	        	          });
	        	          this.getlist();
			        })
			    }
			},
			downExcelHandle() {
			    this.$refs.downNode.click()
			},
			upLoadHandle() {
			    this.$refs.upLoad.value = '' // 每次点击清空上次的值
			    this.$refs.upLoad.click()
			},
			operatekeymanhander(row,type){
				if (type=='set' || type=='edit') {
					this.$router.push({path:'/projectSubCommissionSetKeyMan',query:{id: row.id,pagetype:type}})
				}else {
					this.$confirm('是否取消设置?', '提示', {
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  type: 'warning'
					}).then(() => {
						this.axios.post(api.KEYPERSONACANCEL,{projectSettingId:row.id}).then(res=>{
							if (res.data.code == 200) {
								this.$message({
									message: '取消成功',
									type: 'success'
								})
								this.getlist()
							}
						})
					}).catch(() => {
					  this.$message({
					    type: 'info',
					    message: '已取消'
					  });          
					});
				}
			},
			//分佣设置
			sethander(row){
				this.$router.push({path:'/subcommissionSet',query:{id: row.id}})
			},
			handleCurrentChange(){
				this.getlist()
			},
			handleSizeChange(val){
				this.ruleForm.pageSize = val
				this.getlist();
			},
			getlist(){
				this.axios.post(api.PROJECTSETTING,this.ruleForm).then((res) => {
					if (res.data.code == 200) {
					    this.tableData = res.data.data.list;
					    this.totalSize = res.data.data.total;
					}
				})
			},
			searchList(){
				this.ruleForm.pageNum = 1
				this.getlist()
			},
			projectlevel(){
				this.axios.post(api.PROJECTLEVEL,this.ruleForm).then((res) => {
					if (res.data.code == 200) {
					    this.levellist = res.data.data
					    this.levellist.unshift({'name':'全部',id:''})
					}
				})
			},
			getAllDevList(){
				this.axios.post(api.getAllDevList,{}).then((res) => {
					if (res.data.code == 200) {
					    this.devlist = res.data.data
					    this.devlist.unshift({'developerName':'全部',id:''})
					}
				})
			}
		},
		activated(){
			this.projectlevel()
			this.getAllDevList()
            this.searchList()
        },
		created(){
			this.getlist()
			this.projectlevel()
			this.getAllDevList()
		}
	}
</script>

<style lang="stylus" scoped>

</style>